<template>
	<view class="content">
		<view class="content_top">
			<image class="img" @click="link('/comm/card/card?userid='+userid)" v-if="userheaderimageurl!=''" :src="userheaderimageurl"></image>
			<image class="img" v-else @click="goLink()" src="/static/image/tx.png"></image>
			<view class="right">
				<view class="name" @click="link('/comm/card/card?userid='+userid)" v-if="userheaderimageurl!=''">{{lxr}}</view>
				<view class="name" @click="goLink" v-else>{{lxr}}</view>
				
				<image @click="showQr" src="/static/image/mpm2.png"></image>
			</view>
		</view>
		<view class="content_box">
			<view class="list" @click="link('/user/tab/tab')">
				<view class="left">
					<view class="name">我的行业</view>
					<view class="tab overflow1">{{mytxlCatalog}}</view>
				</view>
				<uv-icon name="arrow-right" color="#7f8289" size="22"></uv-icon>
			</view>
			<view class="list" @click="link('/comm/haoyou/haoyou')">
				<view class="left">
					<view class="name">我的好友</view>
				</view>
				<uv-icon name="arrow-right" color="#7f8289" size="22"></uv-icon>
			</view>
			<view class="list" @click="link('/comm/xiaoxi/list')">
				<view class="left">
					<view class="name">消息</view>
				</view>
				<uv-icon name="arrow-right" color="#7f8289" size="22"></uv-icon>
			</view>
			<view class="list" @click="link('/user/setup/setup')">
				<view class="left">
					<view class="name">设置</view>
				</view>
				<uv-icon name="arrow-right" color="#7f8289" size="22"></uv-icon>
			</view>
			<view class="list" @click="link('/user/feedback/feedback')">
				<view class="left">
					<view class="name">投诉与建议</view>
				</view>
				<uv-icon name="arrow-right" color="#7f8289" size="22"></uv-icon>
			</view>
			<view class="list" @click="link('/user/qr/qr')">
				<view class="left">
					<view class="name">关注官方公众号</view>
				</view>
				<uv-icon name="arrow-right" color="#7f8289" size="22"></uv-icon>
			</view>
		</view>
		<card ref="cardDome" :userid="userid"></card>
	</view>
</template>

<script setup>
	import card from '@/components/card/card.vue'
	import {link} from '@/utils/utils.js'
	import {
		ref
	} from 'vue'
	import {
		homeApi
	} from "@/api/index"
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	
	const cardDome = ref(null)
	const showQr = ()=>{
		cardDome.value.show()
	}
	const goLink = ()=>{
		uni.navigateTo({
			url:'/user/login/login'
		})
	}
	const lxr = ref('')
	const userheaderimageurl = ref('')
	const userid = ref('')
	const mytxlCatalog = ref('')
	onShow(()=>{
		if (uni.getStorageSync("token")) {
			getUserinfo()
		}else{
			lxr.value = '请登录'
		}
	})
	const getUserinfo = async()=>{
		let data = {
			do:'userinfo',
		}
		let res = await homeApi.publicGet(data)
		for (let i = 0; i < res.columns.length; i++) {
			if (res.columns[i].name == 'userinfo') {
				userid.value = res.columns[i].id?res.columns[i].id:''
				lxr.value = res.columns[i].lxr?res.columns[i].lxr:''
				userheaderimageurl.value = res.columns[i].userheaderimageurl?res.columns[i].userheaderimageurl:''
				userid.value =  res.columns[i].id?res.columns[i].id:''
				mytxlCatalog.value = res.columns[i].mytxlCatalog?res.columns[i].mytxlCatalog:''
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		width: 100%;
		height: 100%;
		background: #f5f6fa;
		&_top{
			width: calc(100% - 60rpx);
			padding: 30rpx;
			background: #fff;
			display: flex;
			justify-content: space-between;
			.img{
				width:150rpx;
				height:150rpx;
				border-radius: 100%;
			}
			.right{
				width: calc(100% - 180rpx);
				display: flex;
				font-size: 34rpx;
				font-weight: bold;
				align-items: center;
				justify-content: space-between;
				image{
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
		&_box{
			width: calc(100% - 60rpx);
			padding-left: 30rpx;
			padding-right: 30rpx;
			background: #fff;
			margin-top: 30rpx;
			.list{
				padding-top: 30rpx;
				padding-bottom: 30rpx;
				border-bottom: 1px solid #ebecf4;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.left{
					display: flex;
					width: calc(100% - 40rpx);
					.name{
						font-size: 32rpx;
					}
					.tab{
						width: 450rpx;
						margin-left: 20rpx;
						font-size: 28rpx;
						color: #7f8289;
					}
				}
			}
		}
	}
</style>